<template>
  <div class="goods-list">
    <el-row :gutter="20" v-for="(row, i) in groupData" :key="i">
      <el-col :span="rowSpan" v-for="(item, i) in row" :key="`${item?.roadNo}${i}`">
        <el-card shadow="always" class="item-card">
          <div class="header">货道-{{ item?.roadNo }}</div>
          <div class="item-content">
            <el-image
              :src="item?.comboImg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              fit="cover"
              :preview-src-list="[item?.comboImg]"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div v-if="item?.comboName">
              <div clas="item-title">{{ item?.comboName }}</div>
              <div>￥ {{ item?.price }}</div>
              <div>上架时间:{{ item?.onShelfTime }}</div>
              <div>设备库存:{{ item?.inventory }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getDeviceRoadList } from '@/api/device/index'
import { nextTick } from 'vue'

const props = defineProps({
  machineId: [String, Number],
  machineType: {
    type: [String, Number],
    default: 1
  }
})

const loading = ref(false)
const data = ref([])
const groupData = ref([])
const rowSpan = ref(6)
// 设备货道结构
const machineTypeConfig = {
  2: [15, 4], // 二代机
  3: [8, 3], //三代机
  4: [9, 4], //四代机
  5: [12, 3] //五代机
}

// 获取货道数据
watchEffect(async () => {
  if (props.machineId) {
    loading.value = true
    try {
      const r = await getDeviceRoadList(props.machineId)
      data.value = r.data || []
      nextTick(() => {
        if (data.value?.length && groupData.value.length) handleGroupData(groupData.value)
      })
    } finally {
      loading.value = false
    }
  }
})

// 根据设备类型处理数据及布局规则
watch(
  () => props.machineType,
  (v) => {
    const arrayConfig = machineTypeConfig[v]
    if (arrayConfig) {
      const [columnLen, rowLen] = arrayConfig
      rowSpan.value = Math.floor(24 / rowLen)
      const tempArr = new Array(columnLen).fill(new Array(rowLen).fill({}))
      handleGroupData(tempArr)
    }
  },
  { immediate: true }
)

// 按规则填充货道数据
function handleGroupData(arr) {
  const _data = data.value
  const group = arr.map((row, i) => {
    return row.map((_, j) => {
      const roadNo = `${i + 1}${j + 1}`
      let obj = {}
      if (_data.length) obj = _data.find((item) => item.roadNo == roadNo)

      return { roadNo, ...obj }
    })
  })

  groupData.value = group
}
</script>

<style lang="scss" scoped>
.goods-list {
  width: 100%;
  min-height: 50vh;
  .item-card {
    :deep(.el-card__body) {
      padding: 0 !important;
    }
    padding: 0;
    max-width: 320px;
    margin: 0 auto 20px;
    font-size: var(--el-font-size-base);
    background-color: var(--el-color-white);
    .header {
      text-align: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--el-color-info-light-7);
    }
  }
  .item-content {
    display: flex;
    padding: 10px;
    .item-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .el-image {
      width: 100px;
      height: 80px;
      margin-right: 5px;
    }
  }
}
</style>
